<template>
	<!-- 常用语设置 -->
	<view class="main">
		<view :style="{marginBottom:marginBottom}">
			<view  v-for="(item,index) in dataList" :key="index" style="padding-left: 32rpx;padding-right: 32rpx;"
				@longpress="editIt(index)">
				<view style="display: flex;margin-top: 16rpx;margin-bottom: 16rpx;">
					<image class="sort" src="../../../../static/pc_more.png" style="width: 40rpx;height: 40rpx;">
					</image>
					<text class="tv">{{item.content}}</text>
				</view>
			</view>

		</view>

		<!-- 底部 -->
		<view class="view-bottom">
			<view class="view-bottom-s">
				<view class="view-bottom-b" @click="addIt">
					新增常用语
				</view>
			</view>
			<!-- <view style="height: 68rpx;background: #ffffff;" v-if="needAdapt"> -->
			<!-- 苹果x及以上的安全距离 -->
			<!-- </view> -->
		</view>

		<view class="zhezhao" v-if="showZhezhao">

			<!-- 新增/编辑常用语 -->
			<view class="add-view" v-if="showAdd">
				<view class="message-center-top">
					<text class="message-center-top-title">新增常用语</text>
					<image src="../../../../static/phone/close1.png" class="message-center-top-img" @click="clickClose">
					</image>
				</view>

				<view class="uni-textarea" style="width: 558rpx;height: 316rpx;border-radius: 4rpx;
				margin-left:32rpx;background-color: #f7f7f7;">
					<textarea placeholder="请输入你要添加的一条常用语"
						placeholder-style="color:#666666;font-size:28rpx;width: 490rpx;" class="textarea"
						maxlength="140" v-model="content" />
				</view>

				<view style="display: flex;align-items: center;margin-top: 48rpx;">
					<view class="zhezhao-bottom-x zhezhao-bottom-l" @click="clickClose">
						取消
					</view>
					<view class="zhezhao-bottom-x zhezhao-bottom-r" @click="clickSubmit">
						提交
					</view>
				</view>

			</view>

			<!-- 点击了已有常用语选择操作 -->
			<view class="edit-view" v-if="showEdit">

				<view>
					<view v-for="(item,index) in editList" :key="index">
						<view class="choose-body-item" @click="clickItem(item)">

							<text class="list_item">{{item}}</text>
						</view>
						<view class="line" v-if="index!=editList.length-1"></view>
					</view>

				</view>

				<!-- <view style="height: 68rpx;background: #ffffff;" v-if="needAdapt"> -->
				<!-- 苹果x及以上的安全距离 -->
				<!-- </view> -->
			</view>

		</view>

	</view>
</template>

<script>
	let app = ''
	export default {
		data() {
			return {
				needAdapt: false,
				marginBottom: '',
				role: '',
				dataList: [],
				phrasesIndex: -1,
				phraseId: '',
				showZhezhao: false,
				showAdd: false,
				content: '', //新增输入的内容

				showEdit: false,
				editList: [
					"编辑",
					"删除",
					"取消"
				],
				roleUrl: '',
			}
		},
		onLoad() {
			app = getApp()
			let _this = this

			_this.needAdapt = app.globalData.needAdapt && app.globalData.isIPhone
			if (_this.needAdapt) {
				_this.marginBottom = 180 + 'rpx'
			} else {
				_this.marginBottom = 110 + "rpx"
			}
			_this.role = app.globalData.role
			_this.roleUrl = _this.$roleUrl({
				tab: _this.role
			})

			_this.initData()
		},
		mounted() {

		},

		methods: {
			initData() {
				let _this = this
				_this.dataList = []
				_this.getList()
				_this.showZhezhao = false
				_this.showAdd = false
				_this.phrasesIndex = -1
				_this.phraseId = ''
				_this.content = ''
			},
			/**
			 * 获取已有数据
			 */
			async getList() {
				let _this = this

				uni.showLoading({
					title: '正在加载...'
				})
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/phrase/selector/0`,
					method: 'POST', //默认是GET
				})
				console.log('常用语', res)
				uni.hideLoading()
				if (res.data.code == 200) {
					_this.dataList = res.data.data
				}

			},
			/**
			 * 点击了新增
			 */
			addIt() {
				this.showZhezhao = true
				this.showAdd = true
			},

			/**
			 * 点击了编辑
			 */
			editIt(index) {
				this.phrasesIndex = index
				this.showZhezhao = true
				this.showEdit = true

			},
			/**
			 * 选择了操作
			 */
			clickItem(item) {
				let _this = this
				if (item == '编辑') {
					let tv = _this.dataList[_this.phrasesIndex]['content']
					_this.content = tv
					_this.phraseId = _this.dataList[_this.phrasesIndex]['id']
					_this.showEdit = false
					_this.showAdd = true

				} else if (item == '删除') {
					_this.phraseId = _this.dataList[_this.phrasesIndex]['id']
					_this.deleteIt()


				} else if (item == '取消') {
					_this.phrasesIndex = -1
					_this.showZhezhao = false
					_this.showEdit = false
				}

			},
			/**
			 * 点击了关闭
			 */
			clickClose() {
				this.content = ''
				this.phrasesIndex = -1
				this.showZhezhao = false
				this.showAdd = false
			},
			/**
			 * 点击了提交
			 */
			async clickSubmit() {
				let _this = this
				if (_this.content == '') {
					uni.showToast({
						title: '请输入常用语!',
						icon: "none"
					})
					return
				}

				let url = ''
				let method = ''
				let data = {}
				if (_this.phrasesIndex == -1) {
					url = `/${_this.roleUrl}/phrase/0`
					method = 'POST'
					data = {
						content: _this.content
					}
				} else {
					url = `/${_this.roleUrl}/phrase`
					method = 'PUT'
					data = {
						id: _this.phraseId,
						content: _this.content
					}
				}

				uni.showLoading({
					title: '正在提交...'
				})
				const res = await _this.$myRequest({
					url: url,
					data: data,
					method: method, //默认是GET
				})
				console.log('提交', res)
				uni.hideLoading()
				if (res.data.code == 200) {
					uni.showToast({
						title: '提交成功!',
						icon: "success",
					})
					_this.initData()

				} else {
					uni.showToast({
						title: res.data.msg,
						icon: "none",
					})
				}

			},

			/**
			 * 点击了删除
			 */
			async deleteIt() {
				let _this = this
				uni.showLoading({
					title: '正在处理...'
				})
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/phrase`,
					data: {
						ids: _this.phraseId
					},
					method: 'DELETE', //默认是GET
				})
				console.log('提交', res)
				uni.hideLoading()
				if (res.data.code == 200) {
					uni.showToast({
						title: '删除成功!',
						icon: "success",
					})
					_this.initData()
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: "none",
					})
				}
			},
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>
<style scoped lang="scss">
	.view-bottom {
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #ffffff;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
	}

	.view-bottom-s {
		height: 108rpx;
		display: flex;
		align-items: center;
	}

	.view-bottom-b {
		width: 686rpx;
		height: 88rpx;
		background: #2DA9C5;
		border-radius: 58rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #E8F7FB;
		line-height: 50rpx;
		margin-left: 32rpx;
	}

	.tv {
		width: 630rpx;
		margin-left: 16rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.zhezhao {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		z-index: 9999;
		position: fixed;
		left: 0;
		top: 0;
		overflow: scroll;
		// padding-top: 10vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.add-view {
		width: 622rpx;
		height: 640rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
	}

	.message-center-top {
		height: 108rpx;
		display: flex;
		align-items: center;
	}

	.message-center-top-title {
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		margin-left: 232rpx;
	}

	.message-center-top-img {
		width: 24rpx;
		height: 24rpx;
		margin-right: 32rpx;
		margin-left: auto;
	}

	.textarea {
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		font-size: 28rpx;
		color: #333333;
		line-height: 20rpx;
		width: 490rpx;

	}

	.zhezhao-bottom-x {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 260rpx;
		height: 88rpx;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;

	}

	.zhezhao-bottom-l {
		border: 1px solid #2DA9C5;
		color: #2DA9C5;
		background-color: #FFFFFF;
		margin-left: 32rpx;

	}

	.zhezhao-bottom-r {
		background: #2DA9C5;
		color: #FFFFFF;
		margin-left: auto;
		margin-right: 32rpx;
	}


	.edit-view {
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #ffffff;
		border-top-right-radius: 16rpx;
		border-top-left-radius: 16rpx;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
	}

	.choose-body-item {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}

	.line {
		// width: 100%;
		background-color: #eeeeee;
		height: 1rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
	}

	.list_item {
		color: #333333;
	}
</style>
